<template>
  <div class="setting">
    <div class="setting-table">
        <el-table :data="tableData" border>
            <el-table-column prop="username" label="用户名" width="" align="center"></el-table-column>
            <el-table-column prop="nickname" label="昵称" width="" align="center"></el-table-column>
            <el-table-column prop="expiredDate" label="过期时间" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="resetPwd(scope.row)">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="setting-dialog">
        <el-dialog title="重置密码" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="formData" label-position="right">
                <el-form-item label="旧密码:" label-width="100" v-if="false">
                    <el-input v-model="formData.pwd_old" autocomplete="off" style="width:20vw;" show-password clearable size="small" placeholder="请输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码:" label-width="100">
                    <el-input v-model="formData.pwd_new" autocomplete="off" style="width:20vw;" show-password clearable size="small" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="过期日期:" label-width="100">
                    <el-input v-model.number="formData.countDate" autocomplete="off" style="width:10vw;" @input="formData.countDate = String(formData.countDate).replace(/[^0-9]/,'')" :min="7" :max="999" clearable size="small" placeholder="请输入天数"></el-input>
                    <span>天后</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel_btn" size="small">取 消</el-button>
                <el-button type="primary" @click="confirm_btn" size="small">重置</el-button>
            </div>
        </el-dialog>
    </div>
  </div>
</template>

<script>
import { reqUserInfo, reqResetPassword } from "@/api/project.js";
export default {
  name: "userSetting",
  data(){
    return {
        formData:{
            pwd_old:"",
            pwd_new:"",
            countDate:7
        },
        tableData:[],
        dialogFormVisible:false
    }
  },
  mounted(){
    this.getUserInfo();
  },
  methods:{
    //获取质检员用户信息
    async getUserInfo(){
        let res = await reqUserInfo();
        if(res.data.code === 200){
            let obj = {};
            obj.username = res.data.data.username;
            obj.nickname = res.data.data.nickname;
            obj.expiredDate = res.data.data.expiredDate;
            this.tableData.push(obj);
            //this.$message({type:'success',message:"用户信息获取成功!"});
            //return;
        } else {
            this.$message({type:'error',message:"质检员信息获取失败!"});
        }
        if(res.data.data.isExpired){
            //身份过期,重置密码
            this.dialogFormVisible = true;
            this.$message({type:"warning",message:"质检员身份过期，请重置密码!"});
        }
    },
    //用户重置密码
    async resetPwd (row) {
        this.dialogFormVisible = true;
    },
    //dialog表单的重置与取消事件
    async confirm_btn(){
        //发请求
        let pwd_old = this.formData.pwd_old;
        let pwd_new = this.formData.pwd_new;
        const countDate = this.formData.countDate;
        if(parseInt(countDate) < 7 || parseInt(countDate) > 999){
            this.$alert("输入的天数不合理,天数范围为7 - 999","提示",{confirmButtonText: '确定',callback: action => {}});
            return;
        }
        if(pwd_old !== '' || pwd_new !== ''){
            try {
                let res = await reqResetPassword(pwd_old, pwd_new,countDate);
                this.$message({type:"success",message:"密码修改成功!"});
                //更新数据
                this.tableData = [];
                this.getUserInfo();
                //关闭dialog表单
                this.cancel_btn();
            } catch (error) {
                this.$message({type:"warning",message:"密码修改失败，请重试"});
            }
        } else {
            this.$message({type:"error",message:"请将表单填写完整!"});
        }
    },
    cancel_btn(){
        this.dialogFormVisible = false;
        this.formData.pwd_new = "";
        this.formData.pwd_old = "";
        this.formData.countDate = 7;
    },
    //禁用日期
    disabledDate(time) {
        return time.getTime() < Date.now(); // 禁用今天之前的日期
    }
  }
}
</script>

<style lang='scss'>
.setting {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  justify-content: center;
  
  .setting-table{
    margin: 5vh 0;
    width: 100%;
    height: 100%;
  }
}
.el-message{
    z-index: 3000 !important;
}
</style>